<template>
  <view class="flex-col page">

    <view class="flex-col group"  :style="{paddingTop: safeArea_top + 35 + 'px'}">
      <view class="flex-row">
		<view v-if="isLogin"  style="display: flex;align-items: center;">
			<view class="image_3">
			  <u-avatar size="45" :src="avatar"> </u-avatar>
			</view>
			<view class="flex-col group_2">
			  <text class="text">{{ username }} ID:{{ id }}</text>
			  <text class="text_1">TEL：{{ mobile }}</text>
			</view>
		</view>
		
		<view v-else style="display: flex;align-items: center;"  @click="toLogin">
			<view class="image_3">
			  <u-avatar size="45" :src="avatar"> </u-avatar>
			</view>
			<view class="flex-col group_2">
			  <text class="text">未登录.</text>
			  <text class="text_1">请点击登录查看更多</text>
			</view>
		</view>
		
		<!-- <view class="flex" style="color: #fff;">
			<view @click="iconTap(0)" style="margin-right: 20rpx;">
				<i class="iconfont icon-tixing icon"></i>
			</view>
			<view @click="iconTap(1)">
				<i class="iconfont icon-shezhi icon"></i>
			</view>
		</view> -->
      </view>
      <view class="flex-col group_3">
        <view class="flex-col section_1">
          <view class="flex-row equal-division">
            <view
              class="flex-col equal-division-item"
              @click="toPath('/bundle/pages/wallet/wallet')"
            >
              <text class="text_4">我的余额(元)</text>
              <text class="text_5 price-font">{{ Number(balance) }}</text>
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844696329061808.png"
                class="image_5"
              />
            </view>
            <view
              class="flex-col equal-division-item_1"
              @click="toPath('/bundle/pages/coupon/coupon')"
            >
              <text class="text_6">我的优惠券</text>
              <view class="flex-row group_5">
                <text class="text_7 price-font">{{ coupon }}</text>
                <text class="text_8">张</text>
              </view>
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844697175691197.png"
                class="image_5"
              />
            </view>
          </view>
        </view>

        <view class="flex-col section_5 signGroup">
          <view class="flex justify-between flex1" style="align-items: center">
            <view class="tips">每日签到可获得<text>1至18元</text>现金充值</view>
            <view class="btn" @tap="toSign">立即签到</view>
          </view>
        </view>

        <view class="flex-col section_3">
          <view class="flex-row justify-bw group_6">
            <text class="text_9">我的订单</text>
            <view class="flex-row group_7" @click="toOrder('0')">
              <text>全部订单</text>
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844681219446616.png"
                class="image_8"
              />
            </view>
          </view>
          <view class="flex-row equal-division_1 justify-sa">
            <view
              class="equal-division-item_2 flex-col items-center"
              @click="toOrder('1')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844699072572743.png"
                class="image_9"
              />
              <text class="text_11">待付款</text>
            </view>
            <view
              class="equal-division-item_2 flex-col items-center"
              @click="toOrder('2')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844700094519484.png"
                class="image_9"
              />
              <text class="text_11">待确认</text>
            </view>
            <view
              class="equal-division-item_2 flex-col items-center"
              @click="toOrder('3')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844700417096625.png"
                class="image_9"
              />
              <text class="text_11">进行中</text>
            </view>
            <view
              class="equal-division-item_2 flex-col items-center"
              @click="toOrder('4')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844700880045855.png"
                class="image_9"
              />
              <text class="text_11">已完成</text>
            </view>
            <view
              class="equal-division-item_2 flex-col items-center"
              @click="toOrder('5')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844702354452915.png"
                class="image_9"
              />
              <text class="text_11">已取消</text>
            </view>
          </view>
        </view>
        <view class="flex-col section_5">
          <text class="text_24">常用功能</text>
          <view class="grid">
            <view
              class="grid-item flex-col items-center"
              @click="toPath('/bundle/pages/user_ollection/user_ollection')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844690553524351.png"
                class="image_9 center"
              />
              <text>我的收藏</text>
            </view>
            <view
              class="grid-item flex-col items-center"
              @click="toPath('/bundle/pages/wallet/wallet')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844690662924855.png"
                class="image_9 center"
              />
              <text>我的钱包</text>
            </view>
            <view
              class="grid-item flex-col items-center"
              @click="toPath('/bundle/pages/feedback/feedback')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844693155558501.png"
                class="image_9 center"
              />
              <text>意见反馈</text>
            </view>
            <view
              class="grid-item flex-col items-center"
              @click="toPath('/bundle/pages/user_address/user_address')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844693642664924.png"
                class="image_9 center"
              />
              <text>地址管理</text>
            </view>
            <view
              class="grid-item flex-col items-center"
              @click="toPath('/bundle/pages/settled/settled')"
            >
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844690563034734.png"
                class="image_9 center"
              />
              <text>技师入驻</text>
            </view>

            <view class="grid-item flex-col items-center" @click="jiameng()">
              <image src="../../static/my/me7.png" class="image_9 center" />
              <text>招商加盟</text>
            </view>

            <view class="grid-item flex-col items-center" @click="call">
              <image
                src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844692152240400.png"
                class="image_9 center"
              />
              <text>联系客服</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      username: "",
      mobile: "",
      is_vip: false,
      overdue_time: "",
      avatar: "",
      sex: 0,
      balance: "",
      collect: 0,
      coupon: 0,
      news: 0,
      unpaid: 0,
      unpaid_order: null,
      end_t: "",
      mobiles: "",
      isVip: 0,
      is_vip: 0,
      is_ios: 1,
      new_people: 0,
      isLogin: false,
	  safeArea_top: 0
    };
  },
  onShow() {
	const safeArea = uni.getStorageSync('safeArea')
	this.safeArea_top = safeArea.top
    this.isLogin = uni.getStorageSync("userInfo");
    if (this.isLogin) {
      this.init();
    }
    this.$http.post("api/index/shareConfig").then((res) => {
      const { is_vip } = res;
      this.isVip = is_vip;
    });
    this.is_ios = uni.getStorageSync("is_ios");
  },
  onNavigationBarButtonTap: function (e) {
        if (!this.isLogin) {
          this.toLogin();
          return;
        }
        let { index } = e;
        if (index === 1) {
          uni.navigateTo({
            url: "/bundle/pages/message/message",
          });
        }
        if (index === 0) {
          uni.navigateTo({
            url: "/bundle/pages/user_profile/user_profile",
          });
        }
      },
  methods: {
	  iconTap(index){
		  console.log('index', index);
		  if (index === 0) {
		    uni.navigateTo({
		      url: "/bundle/pages/message/message",
		    });
		  }else{
			uni.navigateTo({
			  url: "/bundle/pages/user_profile/user_profile",
			});  
		  }
	  },
    toSign() {
	  const isLogin = uni.getStorageSync('userInfo');
	  if(isLogin){
		uni.showLoading({});
		this.$http.post("api/user/sign").then((res) => {
		  let icon = "error";
		  if (res.code == 1) {
		    icon = "success";
		    this.init();
		  }
		  uni.hideLoading();
		  uni.showToast({
		    icon,
		    title: res.msg,
		  });
		});  
	  }else{
		uni.showToast({
		  icon: 'none',
		  title: '请先登录',
		});
	  }
    },
    toLogin() {
		// uni.setStorageSync("my-back", '/pages/my/my')
		uni.navigateTo({
			url: "/pages/user/login22",
		});
    },
    toOrderDetail(e) {
      uni.navigateTo({
        url: "/bundle/pages/order_details/order_details?order_sn=" + e.order_sn,
      });
    },
    showtime(endtime) {
      var nowtime = new Date(), //获取当前时间
        endtime = new Date(endtime); //定义结束时间
      var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数
        leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
        lefth = Math.floor((lefttime / (1000 * 60 * 60)) % 24), //计算小时数
        leftm = Math.floor((lefttime / (1000 * 60)) % 60), //计算分钟数
        lefts = Math.floor((lefttime / 1000) % 60); //计算秒数
      if (lefttime <= 0) {
        return "已过期";
      }
      return (
        this.add0(leftd) +
        "天" +
        this.add0(lefth) +
        ":" +
        this.add0(leftm) +
        ":" +
        this.add0(lefts)
      ); //返回倒计时的字符串
    },
    add0(a) {
      a = Number(a);
      return a < 10 ? "0" + a : a;
    },
    init() {
      // 获取个人信息
      this.$http.post("api/user/userInfo").then((res) => {
        for (let i in res) {
          if (i === "unpaid_order") {
            if (res[i] && JSON.stringify(res[i]) !== "{}") {
              this[i] = res[i];
            }
          } else {
            this[i] = res[i];
          }
        }
        uni.setStorageSync("new_people", res.new_people);
      });
      // 获取客服信息 api/user/customerService
      let location = uni.getStorageSync("location");
      if (location) {
        location = JSON.parse(location);
      } else {
        location = { lat: 0, lng: 0 };
      }
      this.$http
        .post(
          `api/user/customerService?lat=${location.lat}&lng=${location.lng}`
        )
        .then((res) => {
          let { mobile } = res;
          this.mobiles = mobile;
        });
    },
    toPath(url) {
      if (this.isLogin) {
        uni.navigateTo({
          url,
        });
      } else {
        this.toLogin();
      }
    },
    toOrder(index) {
      uni.setStorageSync("tabsIndex", index);
      uni.reLaunch({
        url: "/pages/order/order",
      });
    },
    call() {
      if (this.mobiles) {
        const mobile = this.mobiles;
        uni.showModal({
          content: "是否拨打客服电话",
          success: (res) => {
            if (res.confirm) {
              uni.makePhoneCall({
                phoneNumber: mobile + "",
                success: (res) => {
                  // console.log("调用成功!");
                },
                // 失败回调
                fail: (res) => {
                  // console.log("调用失败!", res);
                },
              });
            }
          },
        });
        return;
      }
      uni.showToast({
        icon: "none",
        title: "暂无客服联系号码",
      });
    },
    jiameng() {
		uni.showToast({
		  icon: "none",
		  title: "暂无未开放",
		});
      // window.location.href = "https://www.wenjuan.com/s/UZBZJvtJqvz/";
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  .group {
    background: linear-gradient(to right, #38987c, #38987c);
    background-repeat: no-repeat;
    background-size: 100% 370rpx;
    padding: 0 32rpx 198rpx;
    flex: 1 1 auto;
	
	// .icon{
	// 	font-size: 24px;
	// }

    .group_3 {
      margin-top: 40rpx;

      .section_1 {
        padding-bottom: 24rpx;
        background-color: rgb(255, 255, 255);
        border-radius: 24rpx;

        .section_2 {
          padding: 24rpx 24rpx 20rpx;
          background-image: linear-gradient(
            97.2deg,
            rgb(81, 81, 81) 0%,
            rgb(81, 81, 81) -15.28%,
            rgb(36, 36, 36) 114.1%,
            rgb(36, 36, 36) 100%
          );
          border-radius: 24rpx 24rpx 0px 0px;

          .group_4 {
            margin-bottom: 6rpx;
            color: rgb(226, 189, 128);
            font-size: 28rpx;
            line-height: 40rpx;
            white-space: nowrap;

            .image {
              width: 48rpx;
              height: 48rpx;
            }

            .text_2 {
              margin: 4rpx 0 4rpx 16rpx;
            }
          }

          .text-wrapper {
            padding: 10rpx 0 6rpx;
            color: rgb(38, 38, 38);
            font-size: 28rpx;
            line-height: 40rpx;
            white-space: nowrap;
            background-image: linear-gradient(
              124.3deg,
              rgb(255, 218, 157) 0%,
              rgb(255, 218, 157) -7.15%,
              rgb(231, 191, 124) 104.11%,
              rgb(231, 191, 124) 100%
            );
            border-radius: 27rpx;
            width: 168rpx;
            height: 56rpx;
          }
        }

        .equal-division {
          margin: 26rpx 25rpx 0 24rpx;

          .equal-division-item {
            padding: 24rpx 24rpx;
            flex: 1 1 307rpx;
            background-color: rgba(243, 151, 53, 0.08);
            border-radius: 12rpx;
            height: 144rpx;
            position: relative;

            .text_4 {
              color: rgb(102, 102, 102);
              font-size: 28rpx;
              line-height: 40rpx;
              white-space: nowrap;
            }

            .text_5 {
              margin-top: 8rpx;
              color: rgb(0, 0, 0);
              font-size: 40rpx;
              line-height: 48rpx;
              white-space: nowrap;
            }
          }

          .equal-division-item_1 {
            margin-left: 23rpx;
            padding: 24rpx 24rpx;
            flex: 1 1 307rpx;
            background-color: rgba(24, 181, 103, 0.08);
            border-radius: 12rpx;
            height: 144rpx;
            position: relative;

            .text_6 {
              color: rgb(102, 102, 102);
              font-size: 28rpx;
              line-height: 40rpx;
              white-space: nowrap;
            }

            .group_5 {
              margin-top: 8rpx;

              .text_7 {
                color: rgb(0, 0, 0);
                font-size: 40rpx;
                line-height: 48rpx;
                white-space: nowrap;
              }

              .text_8 {
                margin-left: 6rpx;
                margin-top: 12rpx;
                color: rgb(153, 153, 153);
                font-size: 24rpx;
                line-height: 34rpx;
                white-space: nowrap;
              }
            }
          }

          .image_5 {
            width: 106rpx;
            height: 104rpx;
            position: absolute;
            right: -1rpx;
            bottom: 0;
          }
        }
      }

      .section_3 {
        margin-top: 24rpx;
        padding: 24rpx 0;
        background-color: rgb(255, 255, 255);
        border-radius: 24rpx;

        .group_6 {
          padding: 0 24rpx;

          .text_9 {
            color: rgb(0, 0, 0);
            font-size: 32rpx;
            font-weight: 500;
            line-height: 44rpx;
            white-space: nowrap;
          }

          .group_7 {
            color: rgb(102, 102, 102);
            font-size: 28rpx;
            line-height: 40rpx;
            white-space: nowrap;

            .image_8 {
              margin: 4rpx 0;
              width: 32rpx;
              height: 32rpx;
            }
          }
        }

        .equal-division_1 {
          margin-top: 22rpx;
          color: rgb(0, 0, 0);
          font-size: 24rpx;
          line-height: 34rpx;
          white-space: nowrap;
          padding: 0 21rpx;

          .equal-division-item_2 {
            padding: 10rpx 0;

            .text_11 {
              margin-top: 8rpx;
            }
          }
        }

        .section_4 {
          margin: 22rpx 24rpx 0;
          padding: 16rpx 22rpx 24rpx 24rpx;
          background-image: url("https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844703083187462.png");
          background-position: 0px 0px;
          background-size: 100% 100%;
          background-repeat: no-repeat;

          .group_14 {
            margin-top: 24rpx;

            .text_19 {
              color: rgb(0, 0, 0);
              font-size: 28rpx;
              font-weight: 500;
              line-height: 40rpx;
              white-space: nowrap;
            }

            .text_20 {
              margin-top: 4rpx;
              color: rgb(102, 102, 102);
              font-size: 24rpx;
              line-height: 34rpx;
              white-space: nowrap;
            }
          }

          .text_17 {
            color: rgb(102, 102, 102);
            font-size: 28rpx;
            font-weight: 500;
            line-height: 40rpx;
            white-space: nowrap;
          }

          .text_18 {
            margin-bottom: 4rpx;
            color: rgb(243, 151, 53);
            font-size: 24rpx;
            line-height: 34rpx;
            white-space: nowrap;
          }

          .group_16 {
            margin: 6rpx 0 4rpx;
            white-space: nowrap;
            height: 38rpx;

            .text_21 {
              color: rgb(255, 74, 74);
              font-size: 24rpx;
              line-height: 28rpx;
            }

            .text_22 {
              color: rgb(255, 74, 74);
              font-size: 32rpx;
              line-height: 38rpx;
            }
          }

          .text-wrapper_1 {
            padding: 8rpx 0 6rpx;
            color: rgb(255, 255, 255);
            font-size: 24rpx;
            line-height: 34rpx;
            white-space: nowrap;
            background-image: linear-gradient(
              116.3deg,
              rgb(53, 219, 160) 0%,
              rgb(53, 219, 160) -13.77%,
              rgb(24, 181, 103) 111.69%,
              rgb(24, 181, 103) 100%
            );
            border-radius: 24rpx;
            width: 128rpx;
            height: 48rpx;
          }
        }
      }

      .section_5 {
        margin-top: 24rpx;
        padding: 24rpx 0 20rpx;
        background-color: rgb(255, 255, 255);
        border-radius: 24rpx;

        .text_24 {
          margin-left: 24rpx;
          color: rgb(0, 0, 0);
          font-size: 32rpx;
          font-weight: 500;
          line-height: 44rpx;
          white-space: nowrap;
        }

        .grid {
          margin-top: 24rpx;
          color: rgb(0, 0, 0);
          font-size: 24rpx;
          line-height: 34rpx;
          white-space: nowrap;
          display: grid;
          grid-template-columns: repeat(4, 1fr);

          .grid-item {
            margin: 8px auto;
          }
        }
      }

      .image_21 {
        margin-top: 24rpx;
        border-radius: 24rpx;
        width: 91.5vw;
        height: 21.5vw;
      }

      .image_9 {
        width: 72rpx;
        height: 72rpx;
      }
    }

    .image_3 {
      border: 5rpx solid #ffffff;
      border-radius: 50%;
    }

    .group_2 {
      margin: 10rpx 0 10rpx 16rpx;

      .text {
        color: #fff;
        font-size: 32rpx;
        font-weight: 500;
        line-height: 44rpx;
        white-space: nowrap;
      }

      .text_1 {
        margin-top: 8rpx;
        color: #fff;
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: nowrap;
      }
    }
  }
}
.signGroup {
  white-space: nowrap;
  padding: 12px 12px 10px !important;

  .tips > text {
    color: rgb(243, 153, 54);
  }
  .tips {
    font-size: 13px;
    color: #626262;
  }
  .btn {
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    background: #38987c;
    border-radius: 7px;
  }
}
</style>
